import React, { Component } from 'react'

import {
    TodoHeader,
    TodoInput,
    Todolist,
    Like
} from './components'

import { getTodos } from './api'


export default class App extends Component {

    
    constructor() {
        super()

        this.state = {
            title: "待办事项",
            todos: [],
            isLoading: false
        }

    }

    componentDidMount(){
        getTodos().then((res)=>{
            console.log(res)
            if(res.status === 200){
                this.setState({
                    todos : res.data
                })
            }else {
                
            }
        }).catch(err=>{
            console.log(err)
        })
    }


    addTodo = (inputValue) => {
        // console.log(inputValue)
        //尽量不去更改原数据
        //const newTodo = [...this.state.todos]

        this.setState({
            todos: this.state.todos.concat({
                id: Math.random() * 10,
                title: inputValue,
                completed: false
            })
        },

        )
    }

    deleteTodo = (numb) => {
        console.log('执行删除操作' + numb)
        //尽量不去更改原数据
        const newTodo = [...this.state.todos]
        newTodo.map((item, idx) => {
            if (item.id === numb) {
                newTodo.splice(idx, 1)
            }
            return newTodo
        })
        console.log(newTodo)

        this.setState({
            todos: newTodo
        })
    }





    render() {
        return (
            <>
                <TodoHeader
                    title={this.state.title}
                    desc={this.state.desc}
                >
                </TodoHeader>
                <TodoInput addTodo={this.addTodo} />
                <Todolist todos={this.state.todos} deleteTodo={this.deleteTodo} />
                <Like />
            </>
        )
    }
}